<template>
    <div class="search">
        <form action="/">
            <van-search type="search" v-model="name" show-action placeholder="大家都在搜 减肥" @input="onSearch"
                :loading="loading" @cancel="onCancel" />
            <ul class="show">
                <li v-for="item in searchName"  @click="searchTo(item.pid)" :key="item.pid" >
                    <van-icon name="search" />
                    <span >{{ item.title }}</span>
                </li>
            </ul>
        </form>
        <div class="history">
            <h3>
                <span>历史搜索</span>
                <van-icon @click="deleteHistory" name="delete-o" />
            </h3>
            <ul>
                <li 
                v-for="item in history" 
                :key="item.id"
                >{{ item.title }}
                    <van-icon @click="del(item.id, $event)" :class="{ succss: isSuccess, error: !isSuccess }" class="close"
                        name="close" />
                </li>
            </ul>
        </div>
        <!-- 热门搜索 -->
        <div class="hot">
            <h3>
                <span>热门搜索</span>
                <van-icon name="eye-o" />
            </h3>
            <ul>
                <li>
                    <van-icon color="#f00" name="fire" />
                    减肥
                </li>
                <li>
                    <van-icon color="#f00" name="fire" />
                    瑜伽
                </li>
                <li>
                    <van-icon color="#f00" name="fire" />
                    健身操
                </li>
                <li>腹肌撕裂者</li>
                <li>减肥</li>
            </ul>
        </div>
    </div>
</template>

<script>
import { Toast } from 'vant';
import httpApi from '@/http';

export default {
    data() {
        return {
            name: '',
            history: [],
            isSuccess: false,
            searchName: [],
            loading: false, // 是否正在加载中
            keyWord:'',
            c_id:''
        };
    },

    mounted() {
        this.historySearch()
    },

    methods: {
        searchTo(pid){
            console.log(pid);
            httpApi.courseApi.courserById({pid}).then(res=>{
                console.log(res)

                let params = { title: res.data.data[0].title}
                httpApi.searchApi.searchWordAdd(params).then(res => {
                    console.log(res);
                    this.historySearch()
                })
            })  
        this.$router.push('/index/allcourse')
        },

        historySearch() {
            httpApi.searchApi.searchWordAll().then(res => {
                console.log(res);
                if(res.data.data){
                    this.history = res.data.data.reverse()
                }else{
                    this.history = res.data.data
                }
            })
        },

        del(id, event) {
            console.log(event);
            httpApi.searchApi.searchWordDelete({ id }).then(res => {
                console.log(res);
                    this.historySearch()

            }).catch(err => { })

        },
        onSearch(val) {
            if(val==''){
                this.searchName=[]
                return
            }
            this.search(val)
            
        },
        search(val) { //val就是文本框中的关键字
            this.keyWord = val
            if (val != '') {
                this.loading = true
                // 发请求，模糊查询
                httpApi.courseApi.courserByName({ title: val }).then(res => {
                console.log('模糊查询结果', res)
                   this.searchName=res.data.data
                })
            }
        },
        onCancel() {
            this.$router.push('/home/indexV/index')
            // Toast('取消');
        },
        deleteHistory() {
            this.isSuccess = !this.isSuccess
        }
    },
}
</script>

<style lang="scss">
.search {
    .van-search__content {
        border-radius: 20px;
        background-color: #eee;

    }

    ul.show {
        position: absolute;
        background-color: #eee;
        z-index: 100;
        width: 100%;
        // height: 92vh;

        li {
            padding: 2vh 2vh;
            background-color: #fff;
            display: flex;
            align-items: center;
            font-size: 14px;
            border-bottom: 1px solid #eee;

            .van-icon {
                margin-right: 2vw;
            }
        }
    }

    .history {
        padding: 2vh;

        h3 {
            margin-top: 2vh;
            display: flex;
            justify-content: space-between;
        }

        ul {
            margin-top: 2vh;
            display: flex;
            flex-wrap: wrap;

            li {
                font-size: 14px;
                margin: 1vh 1vh;
                padding: 1vw 3vw;
                border-radius: 5vh;
                background-color: #eee;
                position: relative;

                .close {
                    position: absolute;
                    top: 0;
                    right: -5px;

                    &.succsess {
                        display: block;
                    }

                    &.error {
                        display: none;
                    }
                }
            }
        }
    }

    .hot {
        padding: 2vh;

        h3 {
            margin-top: 2vh;
            display: flex;
            justify-content: space-between;
        }

        ul {
            margin-top: 2vh;
            display: flex;
            flex-wrap: wrap;

            li {
                width: 40vw;
                font-size: 14px;
                margin: 3vw 1vh;

            }
        }
    }
}
</style>
<style>
* {
    padding: 0;
    margin: 0;
}
</style>